<template>
    <div>
        <div class="uiwu-header">
            <el-page-header @back="$router.go(-1)" content="提现详情" />
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>基础信息</span>
            </div>
            <el-form inline label-width="140px">
                <!-- <el-form-item style="width: 48%" label="用户头像">
					<el-image :src="infoData.transfer_voucher" style="width:80px;height:80px"></el-image>
				</el-form-item> -->
                <el-form-item style="width: 48%" label="用户昵称">{{ infoData.name }}</el-form-item>
                <el-form-item style="width: 48%" label="手机号码">{{ infoData.mobile }}</el-form-item>
            </el-form>
            <el-form inline label-width="140px">
                <el-form-item style="width: 48%" label="提现金额">￥{{ infoData.money }}</el-form-item>
                <el-form-item style="width: 48%" label="申请时间">{{ infoData.create_time }}</el-form-item>
                <el-form-item style="width: 48%" label="提现手续费">￥{{ infoData.handling_fee }}</el-form-item>
                <el-form-item style="width: 48%" label="转账时间">{{ infoData.transfer_time }}</el-form-item>
                <el-form-item style="width: 100%" label="实际转账金额">￥{{ infoData.left_money }}</el-form-item>
                <el-form-item style="width: 100%" label="提现状态">{{ infoData.status_desc }}</el-form-item>
                <el-form-item style="width: 100%" label="转账凭证">
                    <el-image
                        v-if="infoData.transfer_voucher"
                        :src="infoData.transfer_voucher"
                        :preview-src-list="[infoData.transfer_voucher]"
                        style="width: 80px; height: 80px"
                    />
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiWithdrawDetail } from '@/api/finance/finance'
@Component
export default class FinanceProfile extends Vue {
    infoData: any = {}
    getApiWithdrawDetail() {
        apiWithdrawDetail({
            id: this.$route.query.id
        }).then(res => {
            console.log(res)
            this.infoData = res
        })
    }
    created() {
        this.getApiWithdrawDetail()
    }
}
</script>
<style lang="scss" scoped>
.uiwu-header {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #fff;
}
.uiwu-content {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #fff;
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        > span {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;

            &::before {
                content: '';
                width: 4px;
                height: 18px;
                background: #409eff;
                margin-right: 10px;
            }
        }
    }
}
</style>
